<template>
	<div>
		<div id="header" >
			<div class="header-left">
				<div class="btr" v-on:click="goMovie"></div>
			</div>
			<div class="title">
				短评-{{short_reviews.subject.title}}
			</div>
		<div class="header-left"></div>
	</div>
		<loading v-if = "loading"></loading>
		<div class="short" v-for="reviews in short_reviews.reviews"  v-if = "!loading" >
		<star :num="(reviews.rating.value)*10"></star>
			<p>{{reviews.summary}}</p>
			<div class="author">
				<img v-bind:src="reviews.author.avatar"><span>{{reviews.author.name}}</span>
			</div>
		</div>
	</div>
</template>
<script>
  import star from "./star"
  import loading from "./loading"
	export default{
		name:"short_reviews",
		data(){
			return {
				loading:true,
				short_reviews:{}
			}
		},
		  components:{
		    star:star,
		    loading:loading
		  },
		methods:{
			goMovie:function(){
				this.$router.go(-1)
			}/*
			goHref:function(){

			}*/
		},
		mounted:function(){
			var id = this.$route.params.id
			this.$http.jsonp('https://api.douban.com/v2/movie/subject/'+id+'/reviews?apikey=0b2bdeda43b5688921839c8ecb20399b')/*
   			 this.$http.get('http://localhost:8080/static/data.json')*/.then(function(response){
 				this.loading = false
         		this.short_reviews = response.body;
    		})
		}
	}
</script>
<style scoped>
	#header{
		height: 50px;
		width: 100%;
		background-color: #e54847;
		box-sizing: border-box;
		padding: 6px;
		display: flex;
		text-align: center;
		overflow: hidden;
	}
	#header .header-left{
		flex: 1;
		position: relative;
	}
	#header .header-left .btr{
		position: absolute;
	    top: 12px;
	    left: 20px;
	    height: 13px;
	    width: 13px;
	    border: 2px solid #fff;
	    border-width: 0 0 2px 2px;
	    -webkit-transform: rotate(45deg);
	    transform: rotate(45deg);
	}
	#header .title{
		font-size: 20px;
		color:#fff;
		line-height: 40px;
		flex: 4;
	}
	#header .header-right{
		flex: 1;
	}
	.short{
		border-bottom: 1px solid #d6d3d3;
		padding-bottom: 5px;
		background: #e5e9f2;
		padding:10px;
	}
	.short p{
		color: #333;
		line-height: 18px;
		font-size: 12px;	
	    padding-bottom: 10px;
	    padding-top: 10px;
	}
	.short span{
		vertical-align: 80%;
    	margin-left: 5px;
    	color: #999;
		font-size: 12px;
	}
	.short img{
		border-radius: 50%;
	}
	.short p{
		color: #333;
	    font-size: 12px;
	    font-family: 微软雅黑;
		}
</style>